<template>
	<div class="hello">
   		<section>
   			<router-link to="/search" tag="input" placeholder="请输入搜索关键词" v-model="value" class="searchs"></router-link>
			
			<van-swipe :autoplay="3000" indicator-color="#ccc" style="height: 100px;margin-top: 20px;">
			  <van-swipe-item style="background: #39A9ED;">1</van-swipe-item>
			  <van-swipe-item>2</van-swipe-item>
			  <van-swipe-item style="background: #39A9ED;">3</van-swipe-item>
			  <van-swipe-item>4</van-swipe-item>
			</van-swipe>
			<ul class="home_nav">
				<router-link to="/singer" tag="li">
					<img src="../../build/logo.png"/>
					<p>歌手</p>
				</router-link>
				<router-link to="/hot" tag="li">
					<img src="../../build/logo.png"/>
					<p>排行榜</p>
				</router-link>
				<router-link to="/classify" tag="li">
					<img src="../../build/logo.png"/>
					<p>分类歌单</p>
				</router-link>
				<router-link to="/recommend" tag="li">
					<img src="../../build/logo.png"/>
					<p>歌手</p>
				</router-link>
			</ul>
			
			<div class="home_list">
				<p>
					推荐歌单
					<router-link to="#" tag="span">更多&gt;</router-link>
				</p>
				<ul>
					<router-link to="#" tag="li">
						<img src="../../build/logo.png"/>
						<p>【欧美经典】百首励志英文歌</p>
					</router-link>
					<router-link to="#" tag="li">
						<img src="../../build/logo.png"/>
						<p>别具一格的华语女生说唱</p>
					</router-link>
					<router-link to="#" tag="li">
						<img src="../../build/logo.png"/>
						<p>【欧美经典】百首励志英文歌</p>
					</router-link>
					<router-link to="#" tag="li">
						<img src="../../build/logo.png"/>
						<p>【欧美经典】百首励志英文歌</p>
					</router-link>
					<router-link to="#" tag="li">
						<img src="../../build/logo.png"/>
						<p>【欧美经典】百首励志英文歌</p>
					</router-link>
					<router-link to="#" tag="li">
						<img src="../../build/logo.png"/>
						<p>【欧美经典】百首励志英文歌</p>
					</router-link>
				</ul>
			</div>
			
			<div class="home_radio">
				<p>
					热门电台
					<router-link to="#" tag="span">更多&gt;</router-link>
				</p>
				<ul>
					<router-link to="#" tag="li">
						<img src="../../build/logo.png"/>
						<p>古典</p>
					</router-link>
					<router-link to="#" tag="li">
						<img src="../../build/logo.png"/>
						<p>古典</p>
					</router-link>
					<router-link to="#" tag="li">
						<img src="../../build/logo.png"/>
						<p>古典</p>
					</router-link>
				</ul>
			</div>
			
			<div class="home_new">
				<p>
					热门电台
					<router-link to="#" tag="span">更多&gt;</router-link>
				</p>
				<ul>
					<router-link to="#" tag="li">
						<img src="../../build/logo.png"/>
						<p>黑夜里的少女</p>
						<p>洛天依</p>
					</router-link>
					<router-link to="#" tag="li">
						<img src="../../build/logo.png"/>
						<p>出现</p>
						<p>那英</p>
					</router-link>
					<router-link to="#" tag="li">
						<img src="../../build/logo.png"/>
						<p>ALL Light</p>
					</router-link>
				</ul>
			</div>
			
			<div class="home_mv">
				<p>
					热门MV
					<router-link to="#" tag="span">更多&gt;</router-link>
				</p>
				<ul>
					<router-link to="#" tag="li">
						<img src="../../build/logo.png"/>
						<p>【欧美经典】百首励志英文歌</p>
					</router-link>
					<router-link to="#" tag="li">
						<img src="../../build/logo.png"/>
						<p>【欧美经典】百首励志英文歌</p>
					</router-link>
					<router-link to="#" tag="li">
						<img src="../../build/logo.png"/>
						<p>【欧美经典】百首励志英文歌</p>
					</router-link>
					<router-link to="#" tag="li">
						<img src="../../build/logo.png"/>
						<p>【欧美经典】百首励志英文歌</p>
					</router-link>
				</ul>
			</div>
   		</section>
   		
	</div>
</template>

<script>
	import {Tabbar, TabbarItem,Search,Swipe, SwipeItem} from 'vant';
	export default {
		name: 'HomePage',
		components:{
         [Tabbar.name]:Tabbar,
         [TabbarItem.name]:TabbarItem,
         [Search.name]:Search,
         [Swipe.name]:Swipe,
         [SwipeItem.name]:SwipeItem
      },
		data() {
			return {
				src: '',
				active:0
			}
	  },
	  methods:{
	  	back(){
	  		this.$router.go(-1);
	  	}
	  }
	}
</script>

<style>
			.hello{
	height: 100vh;
	display: flex;
	flex-direction: column;
}
header{
	position: relative;
	height: 40px;
	background: #f1f1f1;
	color: #a1a1a1;
	font-size: 18px;
	/*margin-bottom: 15px;*/
}
/*section{
	flex: 1;
	overflow: auto;
}*/

.home_nav{
	margin-top: 23px;
	height: 67px;
	display: flex;
	justify-content: space-around;
}
.home_nav li>img{
	width: 40px;
	height: 40px;
	border-radius:50% ;
}
.home_nav li>p{
	font-size: 14px;
	margin-top: 7px;
	text-align: center;
}
.home_list>p{
	font-size: 16px;
	margin: 14px 0;
}
.home_list>p>span{
	margin-left: 10px;
}
.home_list ul{
	flex-wrap: wrap;
	display: flex;
	justify-content: space-around;
}
.home_list ul li>img{
	width: 99px;
	height: 100px;
}
.home_list ul li>p{
	width: 98px;
	font-size: 12px;
	word-break: break-word;
	margin-bottom: 16px;
}
.home_radio>p>span{
	margin-left: 10px;
}
.home_radio ul{
	flex-wrap: wrap;
	display: flex;
	justify-content: space-around;
	margin-top: 15px;
}
.home_radio ul li>img{
	width: 91px;
	height: 91px;
	border-radius:50% ;
}
.home_radio li>p{
	font-size: 14px;
	margin: 7px 0;
	text-align: center;
}
.home_new>p>span{
	margin-left: 10px;
}
.home_new ul{
	flex-wrap: wrap;
	display: flex;
	justify-content: space-around;
	margin-top: 15px;
}
.home_new ul li>img{
	width: 91px;
	height: 91px;
}
.home_new li>p{
	font-size: 14px;
	margin:7px 0;
	text-align: center;
}
.home_mv>p>span{
	margin-left: 10px;
}
.home_mv ul{
	flex-wrap: wrap;
	display: flex;
	justify-content: space-around;
	margin-top: 15px;
}
.home_mv ul li>img{
	width: 157px;
	height: 109px;
}
.home_mv ul li>p{
	width: 98px;
	font-size: 12px;
	word-break: break-word;
	margin-bottom: 16px;
}
.searchs{
	width: 330px;
	height: 28px;
	border-radius:10px ;
	border: 1px solid #ccc;
	margin: 10px 0 0 17px;
}
</style>